<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
    <h2>update css skills with<span class=""></span></h2>
        <div class="controls">
            <div class="filelds">
                <label for="spacing">sping</label>
            <!-- 输入控件 html5 更加强大的表达类型 -->
            <input type="range" min="20" max="100" id="spacing" name="spcing" value="20" data-sizing="px"
            data-num="120">
        <span id="spacing__res">20px</span></div>
        <div class="filelds">
            <label for="blur">blur</label>
            <!-- 输入控件 html5 更加强大的表达类型 -->
            <input type="range" min="20" max="100" id="blur" name="spcing" value="20" data-sizing="px">
        <span id="blur__res">20px</span></div>
        <div class="filelds">
            <label for="color">Base Color</label>
            <!-- 输入控件 html5 更加强大的表达类型 -->
            <input type="color" id="color" name="spcing" value="#ffc600">
        <span id="color__res">20</span></div>
        </div>
</body>
<script>
    const inputs=document.querySelectorAll('.filelds input');
console.log(inputs);
const spacingInput=document.querySelector('#spacing');
const blurInput=document.querySelector('#blur');
//数组遍历，并调用回调函数
inputs.forEach(function(input){
  input.addEventListener('change',function(event){
      const res='#'+this.id+'__res';
      document
      .querySelector(res)//优先级
      .innerText=this.value+(this.dataset.sizing?this.dataset.sizing:'');
  })

})
    /*const spacingInput=document.querySelector('#spacing');
    spacingInput.addEventListener('change',function(event){
        //js 是事件驱动的语言 
        //函数有一个指针
        //this在js中最重要的基础
        //this 处理函数中，this指向事件发生的对象
        //this==event.target.value;
        //代码可读性
        console.log(event.target.value);
        document.querySelector('#spacing__res').innerHTML=event.target.value
        +this.dataset.sizing;
    
    })
    const blurInput=document.querySelector('#blur');
        blurInput.addEventListener('change',function(){
            console.log(event.target.value);
        document.querySelector('#blur__res').innerHTML=event.target.value
        +this.dataset.sizing;
        })*/
</script>
</html>